<template>
  <div>
    <div class="video-data">
      <div
        class="video-item"
        :class="item.key == dataTrendKey ? 'video-item-bg': ''"
        v-for="(item, index) in props.videoDataTrend"
        :key="index"
        @click="dataTrendClick(item)"
      >
        <a-row justify="space-between" align="middle" style="width: 100%">
          <a-col style="text-align: left">
            <div class="video-item-num">{{ item.name}}</div>
            <div class="video-item-title">{{meowNumberFormatter(item.count)}} </div>
          </a-col>
          <a-col>
            <div class="video-item-img">
              <!-- <img :src="item.image" style="width: 100%; height: 100%" /> -->
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
import { Chart } from "@antv/g2";
import utils from "@/common/utils/utils.js";
import request from "@/common/utils/request";
import {meowNumberFormatter} from '@/common/utils/atherUtils.js'



const props = defineProps({
  videoDataTrend: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const emit = defineEmits(["tabChange"]);

const dataTrendKey = ref('')

const dataTrendClick=(item)=>{
  dataTrendKey.value = item.key
  emit('tabChange',item)
}

onMounted(() => {
});

watch(
  ()=>props.videoDataTrend,
  (val)=>{
    if(val){
      dataTrendKey.value = val[0].key
    }
  }
)

onUnmounted(() => {
});

const dataTrendKeyVal = computed(() => {
  const find = props.videoDataTrend.find(ele => ele.key == dataTrendKey.value)
  return find 
})

defineExpose({
  dataTrendKeyVal
})

</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 400px;
}

.card {
  background: #fff;
  // padding: 10px;
}

.video-data {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 创建 5 列，每列宽度相等 */
  background: #fff;
  .video-item {
    padding: 16px;
    text-align: center;

    display: flex;
    align-content: center;
    cursor: pointer;
    background: #f7f9fc;
    position: relative;
    border-right: 1px solid #eeeeee ;

    &.video-item-bg{
      background: #fff;
      &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--ss-primary-color-active);
        z-index: 2;
      }
    }
    .video-item-title {
      font-size: 20px;
      font-weight: 700;
      margin-top: 10px;
      color: #252632;
    }
    .video-item-num {
      font-size: 14px;
      font-weight: bold;
      color: #252632cc;
    }

    .video-item-img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
    }

  }

}
</style>
